<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片处理</title>

<link href="./Tpl/Default/Static/Css/color.css" rel="stylesheet" type="text/css" />
<link href="./Tpl/Default/Static/Css/jquery.ui.slider.css" rel="stylesheet" type="text/css" />
<link href="./Tpl/Default/Static/Css/imgbase.css" rel="stylesheet" type="text/css" />
<link href="./Tpl/Default/Static/Css/imgareaselect-default.css" rel="stylesheet" type="text/css" />

<script src="./Tpl/Default/Static/Js/jquery.js" type="text/javascript"></script>

<script src="./Tpl/Default/Static/Js/jquery.imgareaselect.js" type="text/javascript"></script>

<script src="./Tpl/Default/Static/Js/farbtastic.js" type="text/javascript"></script>
<script src="./Tpl/Default/Static/Js/jquery.ui.widget.js" type="text/javascript"></script>
<script src="./Tpl/Default/Static/Js/jquery.ui.mouse.js" type="text/javascript"></script>
<script src="./Tpl/Default/Static/Js/jquery.ui.slider.js" type="text/javascript"></script>
<script src="./Tpl/Default/Static/Js/repair_img.js" type="text/javascript"></script>

<script>

function htmlspecialchars(str){  
    var s = "";
    if (str.length == 0) return "";
    for (var i=0; i<str.length; i++){
        switch (str.substr(i,1)){
            case "<": s += "&lt;";break;
            case ">": s += "&gt;"; break;
            case "&": s += "&amp;"; break;
            case "=": s += "&#61;"; break;
            case "#": s += "&#35;"; break;
            case " ":
                if(str.substr(i + 1, 1) == " "){
                    s += " &nbsp;";
                    i++;
                } else s += " ";
                break;
            case "\"": s += "&quot;"; break;
            case "\n": s += "<br>"; break;
            default: s += str.substr(i,1); break;
        }
    }
    return s;
}

function createimg(path,img) {
	//$("#showimg img").remove();
	//$("#showimg").append('<img src='+img+'>');
    /*
	if(confirm("是否裁剪此规格的图片作为封面？")==false){
		return;
	}
	*/
	url="/trends/index.php?m=Album&a=createimg";
	
    if ($("#imgList li").length > 7) {
        return;
    }

    var imgpath = $("#imgpath").val();
    var text_input_1 = $("#text_input_1").val();
    var text_input_2 = $("#text_input_2").val();
    var text_input_3 = $("#text_input_3").val();
    var text_input_4 = $("#text_input_4").val();
	
    var spacing_1 = $("#spacing_1").val();
    var spacing_2 = $("#spacing_2").val();
    var spacing_3 = $("#spacing_3").val();
    var spacing_4 = $("#spacing_4").val();
	
    var font_size_1 = $("#font_size_1").val();
    var font_size_2 = $("#font_size_2").val();
    var font_size_3 = $("#font_size_3").val();
    var font_size_4 = $("#font_size_4").val();
	
    var font_color_1 = $("#font_color_1").val();
    var font_color_2 = $("#font_color_2").val();
    var font_color_3 = $("#font_color_3").val();
    var font_color_4 = $("#font_color_4").val();
	
    var linespacing_1 = $("#linespacing_1").val();
    var linespacing_2 = $("#linespacing_2").val();
    var linespacing_3 = $("#linespacing_3").val();
    var linespacing_4 = $("#linespacing_4").val();
	
    var selectFont_1 = $("#selectFont_1").val();
    var selectFont_2 = $("#selectFont_2").val();
    var selectFont_3 = $("#selectFont_3").val();
    var selectFont_4 = $("#selectFont_4").val();
	
    var font_x_1 = $("#font_x_1").val();
    var font_x_2 = $("#font_x_2").val();
    var font_x_3 = $("#font_x_3").val();
    var font_x_4 = $("#font_x_4").val();
	
    var font_y_1 = $("#font_y_1").val();
    var font_y_2 = $("#font_y_2").val();
    var font_y_3 = $("#font_y_3").val();
    var font_y_4 = $("#font_y_4").val();
	
    var area_x_1 = $("#area_x_1").val();
    var area_x_2 = $("#area_x_2").val();
    var area_x_3 = $("#area_x_3").val();
    var area_x_4 = $("#area_x_4").val();
	
    var area_y_1 = $("#area_y_1").val();
    var area_y_2 = $("#area_y_2").val();
    var area_y_3 = $("#area_y_3").val();
    var area_y_4 = $("#area_y_4").val();
	
    var area_w_1 = $("#area_w_1").val();
    var area_w_2 = $("#area_w_2").val();
    var area_w_3 = $("#area_w_3").val();
    var area_w_4 = $("#area_w_4").val();
	
    var area_h_1 = $("#area_h_1").val();
    var area_h_2 = $("#area_h_2").val();
    var area_h_3 = $("#area_h_3").val();
    var area_h_4 = $("#area_h_4").val();
	
	var shareid=$("#shareid").val();
	var albumid=$("#albumid").val();
	
    if (imgpath == "") {
        alert("请选择并上传图片！");
        return;  
    }
    $(".wz_button button").eq(0).attr("disabled", "disabled");
	//post_data = "text_input="+EncodeUtf8(text_input)+"&imgpath="+imgpath+"&spacing="+spacing+"&font_size="+font_size+"&font_color="+font_color+"&linespacing="+linespacing+"&selectFont="+selectFont+"&font_x="+font_x+"&font_y="+font_y+"&area_x="+area_x+"&area_y="+area_y+"&area_w="+area_w+"&area_h="+area_h;
	post_data = "text_input="+encodeURIComponent(text_input_1)+"|^|"
							 +encodeURIComponent(text_input_2)+"|^|"
							 +encodeURIComponent(text_input_3)+"|^|"
							 +encodeURIComponent(text_input_4)+
				"&imgpath="+imgpath+
				"&spacing="+spacing_1+"|^|"
						   +spacing_2+"|^|"
						   +spacing_3+"|^|"
						   +spacing_4+
				"&font_size="+font_size_1+"|^|"
							 +font_size_2+"|^|"
							 +font_size_3+"|^|"
							 +font_size_4+
				"&font_color="+font_color_1+"|^|"
							  +font_color_2+"|^|"
							  +font_color_3+"|^|"
							  +font_color_4+
				"&linespacing="+linespacing_1+"|^|"
							   +linespacing_2+"|^|"
							   +linespacing_3+"|^|"
							   +linespacing_4+
				"&selectFont="+selectFont_1+"|^|"
							  +selectFont_2+"|^|"
							  +selectFont_3+"|^|"
							  +selectFont_4+
				"&font_x="+font_x_1+"|^|"
						  +font_x_2+"|^|"
						  +font_x_3+"|^|"
						  +font_x_4+
				"&font_y="+font_y_1+"|^|"
						  +font_y_2+"|^|"
						  +font_y_3+"|^|"
						  +font_y_4+
				"&area_x="+area_x+"&area_y="+area_y+"&area_w="+area_w+"&area_h="+area_h + "&shareid=" + shareid + "&albumid=" + albumid;
	$.ajax({
        url: url,
        type: 'POST',
        data: post_data,
        dataType: 'text',
        timeout: 60000,
        error: function () {
            alert("生成失败");
        },
        success: function (json) {
            $("#showimg img").attr('src', img+'?'+Math.random());
			var errmes = parseInt(json.substr(0,1));
            var startPos = json.lastIndexOf('^|');
			if(errmes == 1){
				alert("未选择尺寸，生成失败！");
			}else if(errmes == 2){
				alert("尺寸规格不合法，生成失败！");
			}else if(errmes == 3){
				alert("所选图片非jpg或者jpeg格式，生成失败！");
			}else if(errmes == 4){
				alert("生成缩略图错误，生成失败！");
			}else if(errmes == 5){
				alert("裁剪图片错误，生成失败！");
			}else if(json && !startPos){
				alert("发生未知错误，生成失败！");
			}else{
                if(startPos){
                    var css1 = "style='width:100%;height:100%;background:#313131;z-index:99998;position:absolute;top:0px;left:0px;opacity:0.85;-moz-opacity:0.85;filter:alpha(apachity:85);'";
                    var css2 = "style='width:500px;height:500px;background: #000;z-index: 99999;position: absolute;top:25px;left:200px;'";
                    var css3 = "style='width:100%;height:450px;background: #300;'";
                    var css4 = "style='width:280px;height:30px;background: #313131;position:absolute;top:200px;left:320px;z-index:99999;margin-top:100px;opacity:0.65;-moz-opacity:0.65;filter:alpha(apachity:65);'";
                    var css5 = "style='float:left;width:120px;height:30px;'";
                    var css6 = "style='float:left;margin-left:40px;width:120px;height:30px;'";
					
                    var imgPosStart = json.indexOf('/');
                    var imgPosStop = json.indexOf('.jpg');
                    var wps = json.indexOf('.jpg|');
                    var makeimg = "{$resdomain}"+json.substring(imgPosStart-6,imgPosStop+4);
                    var vwidth = parseInt(json.substr(wps+5,3));
                    var vheight = parseInt(json.substr(wps+9,3));

                    $("body").append("<div id='tver' "+css1+"></div>");
                    $(".wz_center").append("<div id='verimg' "+css2+"></div>");
                    $("#verimg").append("<div id='vertop' "+css3+"></div>");
                    $(".wz_center").append("<div id='verbott' "+css4+"><button id='save' "+css5+">满意，保存</button><button id='notsave' "+css6+">不满意，重编辑</button></div>");
                    $("#vertop").append("<img src='"+makeimg+"?"+Math.random()+"' style='border:5px solid #313131;'/>");

                    $("#verimg").css("width",vwidth);
                    $("#verimg").css("height",vheight);
                    $("#vertop").css("height",vheight);

                    $("#verbott").css("top",vheight);
                    $("#verimg").css("left",(890-vwidth)/2);

                    var url2="/trends/index.php?m=Album&a=createimg&issave=1";
                    $("#save").click(function(){
                        $.ajax({
                            url: url2,
                            type: 'POST',
                            data: json,
                            dataType: 'text',
                            timeout: 60000,
                            error: function () {
                                alert("生成失败");
                            },
                            success: function (result) {
                                var errme = parseInt(result.substr(0,1));
                                if(errme == 7){
                                    alert("写入新路径失败，生成失败！");
                                }else if(errmes == 6){
                                    alert("更新路径失败，生成失败！");
                                }else{
                                    //alert("加入文字成功！");
                                    var css7 = "style='width:160px;height:50px;font-size:16px;text-indent:35px;background:yellow;font-family:微软雅黑;z-index:999999;position:absolute;top:150px;left:370px;opacity:0.85;-moz-opacity:0.85;filter:alpha(apachity:85);line-height:50px;display:none;'";
                                    $("body").append("<div id='sucbox' "+css7+"><b>加入文字成功</b></div>");
                                    $("#sucbox").fadeIn("fast",function(){
                                        $("#sucbox").fadeOut(1800);
                                    });
                                }
                            }
                         })
                    })

                    $("#save,#notsave").click(function(){
                        $("#tver,#verimg,#verbott").remove();
                    })
                }
            }
            $("#pic_text").html('');
            $("#Hidden2").val(json.split("￥")[1]);
            $(".wz_img_button button").css("margin-left", "10px");
        }
    });

    $(".wz_button button").eq(0).removeAttr("disabled");
}

var get_width = function (obj) {
    var total_width;
    if (typeof obj == 'object') {
        total_width = obj.offsetWidth;
    } else {
        total_width = document.documentElement.clientWidth + document.documentElement.scrollLeft + document.body.scrollLeft;
    }
    return (total_width);
};

var get_height = function (obj) {
    var total_height;
    if (typeof obj == 'object') {
        total_height = obj.offsetHeight;
    } else {
        total_height = document.documentElement.clientHeight + document.documentElement.scrollTop + document.body.scrollTop;
    }
    return (total_height);
};



</script>
</head>
<body onselectstart="return false;">

<div class="wz_center" style="position:relative;">
	<div id='label' style="position:relative; margin:0 auto; width:700px; font-size:16px; height:25px">截取图片尺寸：
	</div>
	<div class="img_bg" id="pic_ctn">	
		<div id="pic_text_1" style="z-index:20000;"></div>
		<div id="pic_text_2" style="z-index:20001;"></div>
		<div id="pic_text_3" style="z-index:20002;"></div>
		<div id="pic_text_4" style="z-index:20003;"></div>
		<div id="divtable" style="z-index:10000;"></div>
		<div id="showimg"></div>
		
	</div>
	<!--<div class="maked clear-fix">
		<ul id="imgList"></ul>
	</div>-->
</div> 

<div style="visibility:hidden;height:0;overflow:hidden;">

<input id="currOper" type="hidden" value="_1" />
<input id="imgpath" type="hidden" value="" />
<input id="area_x" type="hidden" value="0" />
<input id="area_y" type="hidden" value="0" />
<input id="area_w" type="hidden" value="" />
<input id="area_h" type="hidden" value="" />
<input id="text_input_1" type="hidden" value="{$texts[0]}" />
<input id="font_size_1" type="text" value="12" />
<input id="font_color_1" type="text" value="#000000" />
<input id="spacing_1" type="text" value="0" />
<input id="linespacing_1" type="text" value="15" />
<input id="font_x_1" type="text" value="0" />
<input id="font_y_1" type="text" value="0" />
<input id="selectFont_1" type="text" value="" />
<input id="text_input_2" type="hidden" value="{$texts[1]}" />
<input id="font_size_2" type="hidden" value="12" />
<input id="font_color_2" type="hidden" value="#000000" />
<input id="spacing_2" type="hidden" value="0" />
<input id="linespacing_2" type="hidden" value="15" />
<input id="font_x_2" type="hidden" value="0" />
<input id="font_y_2" type="hidden" value="0" />
<input id="selectFont_2" type="hidden" value="" />
<input id="text_input_3" type="hidden" value="{$texts[2]}" />
<input id="font_size_3" type="hidden" value="12" />
<input id="font_color_3" type="hidden" value="#000000" />
<input id="spacing_3" type="hidden" value="0" />
<input id="linespacing_3" type="hidden" value="15" />
<input id="font_x_3" type="hidden" value="0" />
<input id="font_y_3" type="hidden" value="0" />
<input id="selectFont_3" type="hidden" value="" />
<input id="text_input_4" type="hidden" value="{$texts[3]}" />
<input id="font_size_4" type="hidden" value="12" />
<input id="font_color_4" type="hidden" value="#000000" />
<input id="spacing_4" type="hidden" value="0" />
<input id="linespacing_4" type="hidden" value="15" />
<input id="font_x_4" type="hidden" value="0" />
<input id="font_y_4" type="hidden" value="0" />
<input id="selectFont_4" type="hidden" value="" />


<input id="shareid" type="text" value="{$shareid}" />
<input id="albumid" type="text" value="{$albumid}" />
</div>
<div id="tab">
  <div class="tab_title">
    <div class="u">
      <ul class="scrol">
        <li class="selected">{$texts[0]}</li>
        <li>{$texts[1]}</li>
        <li>{$texts[2]}</li>
        <li>{$texts[3]}</li>
      </ul>
    </div>
  </div>
  <div class="tab_content">
      <dl>
          <dd style="width:500px; height:40px; line-height:80px;"><div class="wz_button" >
		  <button type="button" onclick='createimg("{$dir}","{$img}");'>生成图片</button><input name="Hidden2" type="hidden" id="Hidden2" /></div>
		  </dd>
                 
          <dt>输入文字：</dt>
          <dd style="height:70px;"><textarea name="textarea" rows="6" id="text_input" style="width:300px; height:60px;">{$texts[0]}</textarea></dd>
      
          <dt>设置字体大小：</dt>
          <dd><div id="slider" style="position:absolute;" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 72%; "></a><span id="sizespan"></span></div></dd>
      
          <dt>设置字体间距：</dt>
          <dd><div class="slider_01 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"> <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 36%; "></a><span id="spacespan"></span></div></dd>
      
          <dt>设置行间距：</dt>
          <dd><div class="slider_02 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"> <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 36%; "></a><span id="linespacespan"></span></div></dd>
      
          <dt>文字字体：</dt>
          <dd><select name="select" id="selectFont" onchange="fontChange();">
            <option value="Microsoft JhengHei Bold" selected="selected">微软正黑 粗体</option>
            <option value="Microsoft JhengHei">微软正黑</option>
            <option value="微软雅黑 Bold">微软雅黑 粗体</option>
            <option value="宋体">宋体</option>
            <option value="黑体">黑体</option>
            <option value="微软雅黑">微软雅黑</option>
            <option value="幼圆">幼圆</option>
            <option value="时尚中黑简体">时尚中黑简体</option>
            <option value="方正粗宋简体">方正粗宋简体</option>
            <option value="方正细等线_GBK">方正细等线_GBK</option>
            <option value="方正报宋简体">方正报宋简体</option>
            <option value="方正粗倩简体">方正粗倩简体</option>
            <option value="汉仪中等线简">汉仪中等线简</option>
            <option value="隶书">隶书</option>
            <option value="Candara">Candara</option>
            <option value="Candara Bold">Candara 粗体</option>
            <option value="Candara Bold Italic">Candara 粗体 斜体</option>
            <option value="Candara Italic">Candara</option>
            <option value="Century Gothic Bold Italic">Century Gothic Bold Italic</option>
            <option value="Freestyle Script">Freestyle Script</option>
            <option value="Century Gothic">Century Gothic</option>
            <option value="Century Gothic Bold">Century Gothic Bold</option>
            <option value="century Gothic Italic">century Gothic Italic</option>
            <option value="Blackadder ITC">Blackadder ITC</option>
            <option value="Kunstler Script">Kunstler Script</option>
            <option value="Microsoft Sans Serif">Microsoft Sans Serif</option>
            <option value="Microsoft JhengHei">Microsoft JhengHei</option>
            <option value="Microsoft JhengHei Bold">Microsoft JhengHei Bold</option>
            <option value="Stencil">Stencil</option>
           </select></dd>
      
          <dt>文字颜色：</dt>
          <dd style="height:170px"><input name="text" type="text" disabled="disabled" class="textborder" id="txt_color" value="" />
                <div id="picker"><div class="farbtastic">
                      <div class="color" style="background-color: rgb(255, 0, 0);"></div>
                      <div class="wheel"></div>
                      <div class="overlay"></div>
                      <div class="h-marker marker" style="left: 97px; top: 13px;"></div>
                      <div class="sl-marker marker" style="left: 147px; top: 147px;"></div>
                 </div></div>
           </dd>
      </dl>
  </div>
</div>

<script type="text/javascript">
var imgwidth;
var imgheigth;   
var imgpath = "{$img}";  //添加文字图片
 
var img = new Image();
var shareid=$("#shareid").val();
var sizeArr=new Array(new Array(300,300),new Array(200,408),new Array(408,200),new Array(408,616),new Array(616,408),new Array(408,408)); //规格尺寸

var font_x = 0;
var font_y = 0;
var area_x = 0;
var area_y = 0;
var area_w = sizeArr[0][0];
var area_h = sizeArr[0][1];
var currOper=$("#currOper").val();
var index = 0;

$(document).ready(function () {
	//自动获取焦点  
    $("#text_input").focus();

	$(".tab_title ul li").click(function(){
		setTool($(this),$(this));
	});
		
	$("#pic_text_1,#pic_text_2,#pic_text_3,#pic_text_4").mousedown(function(){
		
		setTool($(this),$(".scrol li:eq("+$(this).index()+")"));
		//document.getElementById($(this).attr("id")).onmousedown = drag;
	});
	
	$(".scrol li").click(function(){
		$("#text_input").blur();
		$("#text_input").focus();
	})
	
	$("#pic_text_1,#pic_text_2,#pic_text_3,#pic_text_4").mousedown(drag);

    $("#slider").slider({	
        value: 12,
        min: 0,
        max: 50,
        step: 1,
        slide: function (event, ui) {
            $('#font_size'+currOper).val(ui.value);
            $('#pic_text'+currOper).css({ "font-size": ui.value + 'pt' });
            $('#pic_text'+currOper).css({ "line-height": ui.value + 'pt' });
            $('#linespacespan').html(ui.value);
            $('#sizespan').html(ui.value);
        }
    });

    $(".slider_01").slider({	
        value: 0,
        min: 0,
        max: 50,
        step: 1,
        slide: function (event, ui) {
            $("#spacing"+currOper).val(ui.value);
            $("#pic_text"+currOper).css("letter-spacing", ui.value);
            $('#spacespan').html(ui.value);
        }
    });

    $(".slider_02").slider({	
        value: 15,
        min: 15,
        max: 100,
        step: 1,
        slide: function (event, ui) {
            $("#linespacing"+currOper).val(ui.value);
            $("#pic_text"+currOper).css("line-height", ui.value+"px");
            $('#linespacespan').html(ui.value);

        }
    });

	$('#picker').farbtastic(getColor);
	$(".choice_color").live("click", function (event) {
		event.preventDefault();
		$("#picker").show();
		$(".wz_bottom input, .wz_bottom textarea, .wz_bottom select").live("focus", function () {
			$("#picker").hide();
		});
		$("#color").live("blur", function () {
			$("#picker").hide();
		});
	});
	
	$('#showimg').imgAreaSelect({
		onSelectEnd: function (img, selection) {
			area_x = selection.x1;
			area_y = selection.y1;
		
			$("#font_x"+currOper).val(selection.x1-area_x);
			$("#font_y"+currOper).val(selection.y1-area_y);
			
			$("#area_x").val(selection.x1);
			$("#area_y").val(selection.y1);
			
			$("#pic_text_1").css({'left':area_x+'px','top':area_y+'px'});
			$("#pic_text_2").css({'left':area_x+'px','top':area_y+'px'});
			$("#pic_text_3").css({'left':area_x+'px','top':area_y+'px'});
			$("#pic_text_4").css({'left':area_x+'px','top':area_y+'px'});
		}
	});
	img.onload = function(){
		
		imgwidth=this.width;
		imgheight=this.height;
		
		$("#font_x"+currOper).val(font_x);
		$("#font_y"+currOper).val(font_y);
		$("#area_x").val(area_x);
		$("#area_y").val(area_y);
		$("#area_w").val(area_w);
		$("#area_h").val(area_h);
		$("#imgpath").val(imgpath);
		
		$("#showimg").append('<img src='+imgpath+'>');
		
		$("#showimg").css({ 'width':imgwidth+"px" });
		$("#pic_text_1,#pic_text_2,#pic_text_3,#pic_text_4").css({'font-size':'12pt','line-height':'100%' });
		$("#pic_text_1,#pic_text_2,#pic_text_3,#pic_text_4").css("font-family", $('#selectFont').val());
		//$("#pic_ctn"+currOper).css({ 'width':imgwidth+"px" });
		
		for(i=0;i<sizeArr.length;i++){
		if(imgwidth < sizeArr[i][0] || imgheight < sizeArr[i][1]){
			continue;
		}
			if(i==0) c='checked="checked"';
			else c='';
			$("#label").append('<label id="label'+i+'" style="padding-left:20px"><input type="radio" id="picsize" name="picsize" onclick="radio(this)" value="'+i+'" '+c+' />'+sizeArr[i][0]+'x'+sizeArr[i][1]);
		}
		
		resizeImg(area_w,area_h);
		$('#showimg').imgAreaSelect({ x1: 0, y1: 0, x2: area_w, y2: area_h });
	}
	img.src = imgpath+"?"+Math.random();
	
});

document.getElementById('pic_ctn').onselectstart = new Function("return false");

function drag(e) {
	var text_ctn = document.getElementById(this.id);
	var text_ctn_width = get_width(text_ctn);
	var text_ctn_height = get_height(text_ctn);
	var event = window.event || e;
	if (text_ctn.style.top == '') text_ctn.style.top = 0;
	if (text_ctn.style.left == '') text_ctn.style.left = 0;
	lWidth = event.clientX - parseInt(text_ctn.style.left.replace(/px/, ""));
	tHeight = event.clientY - parseInt(text_ctn.style.top.replace(/px/, ""));
	document.onmousemove = function (e) {
		//图片与外框的水平偏移量
		var hor_offset = ($('#showimg').width() - area_w) / 2;
		var event = window.event || e;
		var left = event.clientX - lWidth;
		var top =  event.clientY - tHeight;
		//判断 top 和 left 是否超出边界
		top = top > area_y + area_h - text_ctn_height ? area_y + area_h - text_ctn_height : top;
		top = top < area_y ? area_y : top;
		left = left > area_x + area_w - text_ctn_width ? area_x + area_w - text_ctn_width : left;
		left = left < area_x ? area_x : left;
		text_ctn.style.top = top + "px";
		text_ctn.style.left = left + "px";
		$("#font_x"+currOper).val(left-area_x);
		$("#font_y"+currOper).val(top-area_y);
	};
	document.onmouseup = function () {
		document.onmousemove = null;
	};
};
	
function resizeImg(area_w,area_h){
	$("#showimg").html("");
	rate_set = area_w/area_h*100;
	rate_img = imgwidth/imgheight*100;
	
	if(rate_set>=rate_img){
		rate_h = parseInt((area_w/imgwidth)*imgheight);
		$("#pic_ctn").css({ 'width':area_w+"px" });
		$("#pic_ctn").css({ 'height':rate_h+"px" });
		$("#showimg").css({ 'width':area_w+"px" });
		$("#showimg").css({ 'height':rate_h+"px" });
		$("#showimg").append('<img src='+imgpath+'?'+Math.random()+' width="'+area_w+'px">');
	}else{
		rate_w = parseInt((area_h/imgheight)*imgwidth);
		$("#pic_ctn").css({ 'width':rate_w+"px" });
		$("#pic_ctn").css({ 'height':area_h+"px" });
		$("#showimg").css({ 'width':rate_w+"px" });
		$("#showimg").css({ 'height':area_h+"px" });
		$("#showimg").append('<img src='+imgpath+'?'+Math.random()+' height="'+area_h+'px">');
	}
	//return {w:rate_w, y:rate_h};
}

function radio(r){
	font_x = 0;
	font_y = 0;
	area_x = 0;
	area_y = 0;
	area_w = sizeArr[r.value][0];
	area_h = sizeArr[r.value][1];
	$("#font_x"+currOper).val(font_x);
	$("#font_y"+currOper).val(font_y);
	$("#area_x").val(area_x);
	$("#area_y").val(area_y);
	$("#area_w").val(area_w);
	$("#area_h").val(area_h);
	$("#pic_ctn").css({ 'width':area_w+"px" });
	resizeImg(area_w,area_h);
	$('#showimg').imgAreaSelect({ x1: area_x, y1: area_y, x2: area_w, y2: area_h });
	$("#pic_text"+currOper).css({'left':font_x+'px','top':font_y+'px'});
}

//按钮的hover状态：
$(".wz_button button").hover(function () {
	$(this).css("background-position", "-20px -299px");
	if ($(this).attr("id") == "Button1") {
		$(this).css("background-position", "-159px -299px");
	}
	}, function () {
		$(this).css("background-position", "-20px -253px");
			if ($(this).attr("id") == "Button1") {
				$(this).css("background-position", "-159px -253px");
		}
});

function setTool(clickObj,tab){
	tab.addClass("selected").siblings().removeClass("selected");
	index  = clickObj.index()+1;
	currOper = '_'+index;
	$("#currOper").val(currOper);
	$("#text_input").val($("#text_input"+currOper).val());
	$("#slider").slider({value:$("#font_size"+currOper).val()});
	$(".slider_01").slider({value:$("#spacing"+currOper).val()});
	$(".slider_02").slider({value:$("#linespacing"+currOper).val()});
	$("#selectFont").val($("#selectFont"+currOper).val());
	$('#txt_color').css("background-color", $("#font_color"+currOper).val());
	$('#sizespan,#spacespan,#linespacespan').html('');
}

function fontChange() {
	$("#pic_text"+currOper).css("font-family", $('#selectFont').val());
	$("#selectFont"+currOper).val($("#selectFont").val());
}

function getColor(color) {
	colorf = color;
	$("#font_color"+currOper).val(color);
	$("#pic_text"+currOper).css("color", color);
	$("#txt_color").css('background', color);
}

$('#text_input').focus(function () { //文本框输入文字
	auto_sync_text = window.setInterval(function () {
		 $("#pic_text"+currOper).html(htmlspecialchars($('#text_input').val()));
		 $('#text_input'+currOper).val($('#text_input').val());
		 $("#tab .tab_title li.selected").html($('#text_input').val());
	}, 100); }).blur(function () { window.clearInterval(auto_sync_text);});

function __doPostBack(eventTarget, eventArgument) {
	alert('');
}

</script>


</body>
</html>